<template>
  <div class="cooperation">
    <div class="cooperation_centent">
      <div class="memder_logo">
        <div class="centre memder_logo_header">
          <router-link
            to="/"
            tag="img"
            src="https://huizeimg.oss-cn-shenzhen.aliyuncs.com/huize/update/156222927235720190704163413.jpg"
            alt
          ></router-link>
          <router-link to="/" tag="span">返回首页</router-link>
        </div>
      </div>

      <header
        class="cooperation_header"
        :style="{backgroundImage: 'url(' + HttpIMG.URLimg02 + ')' }"
      >
        <div class="centre">
          <div class="cooperation_header_join">
            <div></div>
            <div class="cooperation_header_join_right">
              <h3>
                <img src="@/assets/BusinessCooperation/join.png" alt />
              </h3>
              <p>成本低：0加盟费，5000元即可代理，产品永久有效</p>
              <p>低风险：货品可退换，无积压风险</p>
              <p>产品好：AI智能算法、精准定位院校</p>
              <p>市场规模大：中国教育市场总规模预计超千亿元，市场空间巨大</p>
            </div>
          </div>
        </div>
      </header>
      <div class="cooperation_products">
        <div class="products centre">
          <h3>
            <img src="@/assets/BusinessCooperation/products.png" alt />
          </h3>
          <div class="products_list" :style="{backgroundImage: 'url(' + HttpIMG.URLimg03 + ')' }">
            <div class="products_left">
              <div class="products_list_top">
                <h3>数据权威：</h3>
                <p>与考试院同步更新</p>
                <p>2800+所高校，1200+专业，多种查询方式</p>
              </div>
              <div class="products_list_bottom">
                <h3>专业测评</h3>
                <p>认知自己，依据测评结果推荐适合专业</p>
              </div>
            </div>
            <div class="products_right">
              <h3>产品优势：</h3>
              <ul>
                <li>
                  <i></i>
                  AI智能填报
                </li>
                <li>
                  <i></i>
                  一键填报
                </li>
                <li>
                  <i></i>
                  精准定位
                </li>
                <li>
                  <i></i>
                  快速获取目标院校录取概率
                </li>
              </ul>
            </div>：
          </div>
        </div>
      </div>
      <div class="cooperation_products">
        <div class="centre join_us">
          <div class="join_us_top">
            <h3>
              <img src="@/assets/BusinessCooperation/joinUs.png" alt />
            </h3>
          </div>
          <div class="join_us_bottom">
            <el-carousel :interval="4000" type="card" height="420px">
              <el-carousel-item v-for="(item , index)  in US " :key="index">
                <div class="join_us_img" :style="{backgroundImage: 'url(' + item.USimg + ')'  }">
                  <h3>{{item.header}}</h3>
                  <div>{{item.centen}}</div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
      <div class="cooperation_products">
        <div class="consult centre">
          <h3>
            <img src="@/assets/BusinessCooperation/consult.png" alt />
          </h3>
          <div class="consult_mode" :style="{backgroundImage: 'url(' + HttpIMG.URLimg04 + ')' }">
            <div class="consult_mode_top">
              <h3>合作流程：咨询了解—签订协议—培训交流—市场推广—营收</h3>
            </div>
            <div class="consult_mode_from">
              <!-- <el-select v-model="value" v-on:change="selectaddress" placeholder="选择地区">
                      <el-option
                        v-for="(item,index) in addressbox"
                        :key="index"
                        :label="item.title"
                        :value="index"
                      ></el-option>
              </el-select>-->
              <el-form ref="form" :rules="rules" :model="form" label-width="80px" class="formbox">
                <el-form-item label="姓名" class="name" prop="name">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="手机" class="name" prop="phone">
                  <el-input v-model="form.phone"></el-input>
                </el-form-item>
                <el-form-item label="省份" prop="region">
                  <el-select v-model="form.region" placeholder="选择地区">
                    <el-option
                      v-for="(item,index) in addressbox"
                      :key="index"
                      :label="item.title"
                      :value="item.title"
                    ></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="合作方式" prop="type">
                  <el-checkbox-group v-model="form.type">
                    <el-checkbox label="城市合伙人" name="type"></el-checkbox>
                    <el-checkbox label="代理商" name="type"></el-checkbox>
                    <el-checkbox label="升学规划SAAS平台搭建" name="type"></el-checkbox>
                    <el-checkbox label="数据支持（专家一对一）" name="type"></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>

                <el-form-item class="desc" label="留言" prop="desc">
                  <el-input type="textarea" v-model="form.desc"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="submitForm('form')">提交</el-button>
                  <el-button @click="resetForm('form')">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Cooperation",
  data() {
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;

        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("请输入正确的手机号"));
        }
      }
    };
    var HttpURL = "https://huizeimg.oss-cn-shenzhen.aliyuncs.com/huize/update/";
    return {
      HttpIMG: {
        URLimg01: HttpURL + "157621764204901_01Image.png",
        URLimg02: HttpURL + "1576218109839culture_pic_3.jpg",
        URLimg03: HttpURL + "1576218693945BGImage1.png",
        URLimg04: HttpURL + "1576219075653shutterstock.png"
      },

      value: "",
      newtype: "",
      addressbox: [],
      form: {
        phone: "",
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      rules: {
        name: [
          { required: true, message: "请输入您的姓名", trigger: "blur" }, //required：true是label旁边的红点
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" }
        ],
        phone: [{ required: true, validator: checkPhone, trigger: "blur" }],
        region: [{ required: true, message: "请选择省份", trigger: "change" }],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个合作方式",
            trigger: "change"
          }
        ],
        desc: [{ required: true, message: "请输入您的留言", trigger: "blur" }]
      },
      US: [
        {
          USimg: HttpURL + "1576219414766Image01.png",
          header: "升学规划SAAS平台搭建：",
          centen:
            "搭建属于自己品牌的高考志愿升学规划服务平台，自由选择功能模块，多种皮肤任选，提供小程序和WEB端定制服务。"
        },
        {
          USimg: HttpURL + "1576219510806Image02.png",
          header: "数据支持（专家一对一）：",
          centen:
            "针对线下提供一对一服务的高考志愿填报专家，我方可以提供数据支持服务。为其开设专家账号，账号可以限定在一个或多个省份，不限定文理科及分数。专家可通过使用我方应用，直接得到客户相应文理科和分数下的填报方案，缩短专家一对一服务方案的出具时间，增加一对一服务客户数量。"
        },
        {
          USimg: HttpURL + "1576219552577Image03.png",
          header: "城市合伙人：",
          centen:
            "慧择云志愿在全国以地级市为单位招募城市合伙人，每个地级市下面以县（市）、区为单位建立代理商，享有我司独家经营权。"
        },
        {
          USimg: HttpURL + "1576219580759Image04.png",
          header: "代理商：",
          centen:
            "区域代理销售我方品牌下的VIP卡，50张起步，售完可再续，产品永久有效。"
        }
      ]
    };
  },
  beforeCreate() {
    this.$nextTick(() => {
      this.getaddress(); //获得省份接口
    });
  },
  methods: {
    getaddress() {
      //获取省份接口
      this.$ajax({
        methods: "GET",
        url: "/api/province/queryAll",
        success: res => {
          if (res.data.code == 0) {
            this.addressbox = res.data.data;
          }
        }
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // alert('submit!');

          this.newtype = this.form.type.join();

          this.$ajax({
            method: "post",
            url: "/api/v1/bc/apply",
            data: {
              mobile: this.form.phone,
              name: this.form.name,
              message: this.form.desc,
              direction: this.newtype,
              provinceName: this.form.region
            },
            success: res => {
              if (res.data.code == 0) {
                this.$message({
                  message: "提交成功！",
                  type: "success"
                });
              }
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style lang="scss">
.cooperation_centent {
  width: 100%;
  .memder_logo {
    background: #fff;
    .memder_logo_header {
      background: #fff;
      padding: 10px 0;
      img {
        width: 48px;
      }
      span {
        font-size: 22px;
        color: #5e5e5e;
        padding-left: 24px;
        position: relative;
        top: -18px;
        cursor: pointer;
      }
    }
  }
  .cooperation_header {
    width: 100%;
    height: 600px;
    margin: 0 auto;
    background: center center no-repeat;
    background-size: 100%;

    .cooperation_header_join {
      display: flex;
      justify-content: space-between;

      .cooperation_header_join_right {
        border-radius: 10px;
        margin-top: 40px;
        width: 800px;
        height: 500px;
        background: rgba(0, 0, 0, 0.5);
        h3 {
          img {
            width: 190px;
            margin: 44px;
          }
        }
        p {
          color: #fff;
          color: #fff;
          line-height: 74px;
          font-size: 24px;
          padding-left: 38px;
        }
      }
    }
  }

  .cooperation_products {
    background: #282828;

    width: 100%;
    .products {
      padding: 44px 0;
      h3 {
        > img {
          height: 87px;
        }
      }

      .products_list {
        width: 100%;
        height: 600px;
        margin: 44px 0;
        background: center center no-repeat;
        background-size: 100%;
        display: flex;
        justify-content: space-around;

        .products_left {
          margin-top: 36px;
          > div {
            width: 300px;
            height: 200px;
            padding: 20px;
            margin: 0 auto;
            background: rgba($color: #000000, $alpha: 0.5);
            color: #fff;
            font-size: 18px;
            margin-bottom: 40px;
            border-radius: 10px;

            h3 {
              font-size: 22px;
              padding-bottom: 20px;
            }
            p {
              padding: 10px 0;
              line-height: 26px;
            }
          }
          flex: 1;
        }
        .products_right {
          flex: 1;
          h3 {
            display: block;
            margin: 0 auto;
            margin-top: 60px;
            color: #fff;
            font-size: 28px;
            padding-bottom: 20px;
            width: 300px;
          }
          ul {
            width: 300px;
            margin: 0 auto;
            li {
              text-align: center;
              background: rgba($color: #2e71f7, $alpha: 0.3);
              display: block;
              width: 300px;
              padding: 20px;
              margin-left: 40px;
              margin: 46px 0;
              border-radius: 28px;

              color: #fff;
            }
          }
        }
      }
    }
  }
  .join_us {
    .join_us_top {
      padding-bottom: 44px;
      h3 {
        img {
          height: 87px;
        }
      }
    }
    .join_us_bottom {
      .join_us_img {
        width: 100%;
        height: 100%;
        background: center center no-repeat;
        background-size: 100% 100%;
        color: #fff;
        overflow: hidden;
        > h3 {
          font-size: 24px;
          padding: 40px;
        }
        > div {
          width: 86%;
          margin: 0 auto;
          line-height: 32px;
        }
      }

      .el-carousel__item:nth-child(2n) {
        border-radius: 6px;
      }

      .el-carousel__item:nth-child(2n + 1) {
        border-radius: 6px;
      }
      .el-carousel__arrow {
        width: 66px;
        height: 66px;
        font-size: 26px;
        background: rgba($color: #000000, $alpha: 0.5);
      }
    }
  }
  .consult {
    padding: 44px 0;
    > h3 {
      padding-bottom: 44px;
      img {
        height: 87px;
      }
    }

    .consult_mode {
      height: 600px;
      width: 100%;
      padding-top: 36px;
      .consult_mode_top {
        margin: 0 auto;
        width: 800px;
        background: rgba($color: #000000, $alpha: 0.3);
        padding: 20px 0;
        border-radius: 6px;
        text-align: center;
        color: #fff;
        margin-top: 36px;
      }
      .consult_mode_from {
        background: rgba($color: #000000, $alpha: 0.3);
        margin: 0 auto;
        width: 780px;
        padding-left: 20px;
        padding-top: 20px;
        padding-bottom: 20px;
        border-radius: 6px;
        margin-top: 36px;

        .formbox {
          color: #fff;
          .name {
            width: 300px;
          }
          .el-form-item__label {
            color: #fff;
            padding-right: 20px;
          }
          .el-checkbox__label {
            color: #fff;
          }
          .desc {
            width: 750px;
          }
        }
      }
    }
  }
}
</style>
